<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 参考文档 - Types/Event</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Event">Event</a></h4>
      <div class="menu-item"><a href="#Event:constructor">constructor</a></div>
      <div class="menu-item"><a href="#Event:stop">stop</a></div>
      <div class="menu-item"><a href="#Event:stopPropagation">stopPropagation</a></div>
      <div class="menu-item"><a href="#Event:preventDefault">preventDefault</a></div>
      <h4 class="menu-item"><a href="#Event-Keys">Event.Keys</a></h4>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Event"><a href="#Event">类型: Event</a></h1>
      <p class="description">MooTools Event Methods.</p>
      <h2 id="Event:constructor"><a href="#Event:constructor">Event Method: constructor</a></h2>
      <h3 class="description">语法: </h3>
      <pre class="javascript"><span class="kw2">new</span> Event<span class="br0">(</span><span class="br0">[</span>event<span class="br0">[</span>, win<span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>参数: </h3>
      <ol>
        <li>event - (<em>event</em>, required) An HTMLEvent Object.</li>
        <li>win   - (<em>window</em>, optional: defaults to window) The context of the event.</li>
      </ol>
      <h4>Properties:</h4>
      <ul>
        <li>page.x        - (<em>number</em>) The x position of the mouse, relative to the full window.</li>
        <li>page.y        - (<em>number</em>) The y position of the mouse, relative to the full window.</li>
        <li>client.x      - (<em>number</em>) The x position of the mouse, relative to the viewport.</li>
        <li>client.y      - (<em>number</em>) The y position of the mouse, relative to the viewport.</li>
        <li>rightClick    - (<em>boolean</em>) True if the user clicked the right mousebutton</li>
        <li>wheel         - (<em>number</em>) The amount of third button scrolling.</li>
        <li>relatedTarget - (<em>element</em>) The event related target, NOT <code>extended</code> with [$][].</li>
        <li>target        - (<em>element</em>) The event target, not extended with [$][] for performance reasons.</li>
        <li>code          - (<em>number</em>) The keycode of the key pressed.</li>
        <li>key           - (<em>string</em>) The key pressed as a lowercase string. key can be 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', and 'esc'.</li>
        <li>shift         - (<em>boolean</em>) True if the user pressed the shift key.</li>
        <li>control       - (<em>boolean</em>) True if the user pressed the control key.</li>
        <li>alt           - (<em>boolean</em>) True if the user pressed the alt key.</li>
        <li>meta          - (<em>boolean</em>) True if the user pressed the meta key.</li>
      </ul>
      <h3>示例: </h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myLink'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'keydown'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>

    <span class="co1">// the passed event parameter is already an instance of the Event class.</span>
    <span class="kw3">alert</span><span class="br0">(</span>event.<span class="me1">key</span><span class="br0">)</span>;   <span class="co1">// returns the lowercase letter pressed.</span>
    <span class="kw3">alert</span><span class="br0">(</span>event.<span class="me1">shift</span><span class="br0">)</span>; <span class="co1">// returns true if the key pressed is shift.</span>

    <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">key</span> == <span class="st0">'s'</span> &amp;&amp; event.<span class="me1">control</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Document saved.'</span><span class="br0">)</span>; <span class="co1">//executes if the user presses Ctr+S.</span>

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>提示:</h3>
      <ul>
        <li>Accessing event.page / event.client requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
        <li>Every event added with addEvent gets the MooTools method automatically, without the need to manually instance it.</li>
      </ul>
      <h2 id="Event:stop"><a href="#Event:stop">Event Method: stop</a></h2>
      <p class="description">Stop an Event from propagating and also executes preventDefault.</p>
      <h3>语法: </h3>
      <pre class="javascript">myEvent.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>返回值: </h3>
      <ul>
        <li>(<em>object</em>) This Event instance.</li>
      </ul>
      <h3>示例: </h3>
      <h5>HTML:</h5>
      <pre class="javascript">&lt;a id=<span class="st0">"myAnchor"</span> href=<span class="st0">"http://google.com/"</span>&gt;Visit Google.<span class="me1">com</span>&lt;/a&gt;

</pre>
      <h5>JavaScript</h5>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myAnchor'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>

    event.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//Prevents the browser from following the link.</span>
    <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span>, <span class="st0">'Where do you think you<span class="es0">\'</span>re going?'</span><span class="br0">)</span>; <span class="co1">//'this' is Element that fires the Event.</span>

    <span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span>,<span class="st0">'Instead visit the Blog.'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'href'</span>, <span class="st0">'http://blog.mootools.net'</span><span class="br0">)</span>;
    <span class="br0">}</span><span class="br0">)</span>.<span class="me1">delay</span><span class="br0">(</span><span class="nu0">500</span>, <span class="kw1">this</span><span class="br0">)</span>;

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>提示:</h3>
      <ul>
        <li>Returning false within the function can also stop the propagation of the Event.</li>
      </ul>
      <h3>另参考:</h3>
      <ul>
        <li> <a href="../../../docs/core/Element/Element.Event.html#Element:addEvent">Element.addEvent</a>, <a href="#Event:stopPropagation">Element.stopPropagation</a>, <a href="#Event:preventDefault">Event.preventDefault</a>, <a href="../../../docs/core/Types/Function.html#Function:delay">函数:delay</a> </li>
      </ul>
      <h2 id="Event:stopPropagation"><a href="#Event:stopPropagation">Event Method: stopPropagation</a></h2>
      <p class="description">Cross browser method to stop the propagation of an event (this stops the event from bubbling up through the DOM).</p>
      <h3>语法: </h3>
      <pre class="javascript">myEvent.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>返回值: </h3>
      <ul>
        <li>(<em>object</em>) This Event object.</li>
      </ul>
      <h3>示例: </h3>
      <p>"#myChild" does not cover the same area as myElement. Therefore, the 'click' differs from parent and child depending on the click location:</p>
      <h5>HTML:</h5>
      <pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;
    &lt;div id=<span class="st0">"myChild"</span>&gt;&lt;/div&gt;

&lt;/div&gt;
</pre>
      <h5>JavaScript</h5>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'click'</span><span class="br0">)</span>;
    <span class="kw1">return</span> <span class="kw2">false</span>; <span class="co1">//equivalent to stopPropagation.</span>
<span class="br0">}</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myChild'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>

    event.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//prevents the event from bubbling up, and fires the parent's click event.</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>另参考:</h3>
      <ul>
        <li><a href="../../../docs/core/Element/Element.Event.html#Element:addEvent">Element:addEvent</a></li>
        <li><a href="http://developer.mozilla.org/en/docs/DOM:event.stopPropagation">MDC event.stopPropagation</a></li>
      </ul>
      <h2 id="Event:preventDefault"><a href="#Event:preventDefault">Event Method: preventDefault</a></h2>
      <p class="description">Cross browser method to prevent the default action of the event.</p>
      <h3>语法: </h3>
      <pre class="javascript">myEvent.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>返回值: </h3>
      <ul>
        <li>(<em>object</em>) This Event object.</li>
      </ul>
      <h3>示例: </h3>
      <h5>HTML:</h5>
      <pre class="javascript">&lt;form&gt;
    &lt;input id=<span class="st0">"myCheckbox"</span> type=<span class="st0">"checkbox"</span> /&gt;
&lt;/form&gt;
</pre>
      <h5>JavaScript</h5>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myCheckbox'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>
    event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//prevents the checkbox from being "checked".</span>

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>另参考:</h3>
      <ul>
        <li><a href="../../../docs/core/Element/Element.Event.html#Element:addEvent">Element:addEvent</a></li>
        <li><a href="http://developer.mozilla.org/en/docs/DOM:event.preventDefault">MDC event.preventDefault</a></li>
      </ul>
      <h1 id="Event-Keys"><a href="#Event-Keys">Object: Event.Keys</a></h1>
      <p class="description">Additional Event key codes can be added by adding properties to the Event.Keys Object.</p>
      <h4>示例: </h4>
      <pre class="javascript">Event.<span class="me1">Keys</span>.<span class="me1">shift</span> = <span class="nu0">16</span>;
$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'keydown'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>

    <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">key</span> == <span class="st0">'shift'</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'You pressed shift.'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h4>Possible Keys:</h4>
      <ul>
        <li>enter</li>
        <li>up</li>
        <li>down</li>
        <li>left</li>
        <li>right</li>
        <li>esc</li>
        <li>space</li>
        <li>backspace</li>
        <li>tab</li>
        <li>delete</li>
      </ul>
      <h3>另参考:</h3>
      <ul>
        <li><a href="../../../docs/more/Interface/Keyboard.html">MooTools More Keyboard</a></li>
      </ul>
      <h3>Note:</h3>
      <p>Since MooTools 1.3 this is a native JavaScript Object and not an instance of the deprecated Hash</p>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
